<template>
    <div class="comment_container">
        <h2>热门评论 （22）</h2>

        <div class="commentList">
            <ul>
                <li>
                    <img src="../../images/comment/person1.png" alt="">
                    <div>
                        <h1>请叫我逆光光光光 <i></i> <span>2019/05/31</span></h1>
                        <p>陈书艺讲到，现在国内的H5行业是少有的国内领先世界的细分类目，H5游戏以“快消”产品扮演手机页游的角色，满足移动端用户缺失的</p>
                        <span class="glyphicon glyphicon-comment">回复</span>
                    </div>
                </li>
                <li>
                    <img src="../../images/comment/person2.png" alt="">
                    <div>
                        <h1>请叫我逆光光光光 <i></i> <span>2019/05/31</span></h1>
                        <p>陈书艺讲到，现在国内的H5行业是少有的国内领先世界的细分类目，H5游戏以“快消”产品扮演手机页游的角色，满足移动端用户缺失的</p>
                        <span class="glyphicon glyphicon-comment">回复</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
export default {
    
}
</script>

<style lang="less" scoped>
    .comment_container {
        width:100%;
        margin: 10px 0;
        color:#333;

        h2 {
            font-size: 20px;
            font-weight: 700;
            line-height: 40px;
            margin-bottom: 18px;
        }

        .commentList {
            
            li {
                padding:23px 0 10px;
                border-bottom:1px solid #eee;
                display: flex;
            }

            div {
                position: relative;
                padding-bottom:30px;

                .glyphicon-comment:before {
                    content: "\e111";
                    vertical-align: middle;
                    margin-right: 3px;
                }
            }

            div > span {
                    position:absolute;
                    right:0;
                    top:auto;
                    bottom:0;
                    color:#888;
                    font-size: 13px;
                    cursor: pointer;
            }

            div > span:hover {
                color:rgba(239,177,11,1);
            }

            i {
                display: inline-block;
                margin: 0 5px;
                width: 1px;
                background-color: #ccc;
                height: 11px;
                vertical-align: middle;
            }

            img {
                float:left;
                display:block;
                width:80px;
                height:80px;
                margin-right: 28px;
            }

            h1 {
                font-size: 16px;
                margin:2px 0 10px;
                color:#555;

                span {
                    font-size: 12px;
                }
            }

            p {
                color:#999;
            }
        }

    }
</style>
